<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>复习ES6中精简知识点 | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="ES6," />
  

  
  <meta name="description" content="子曰：非礼勿视,非礼勿听,非礼勿言,非礼勿动">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2021-07-08
    </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2021-7-15 15:51 
    </span>
  </div>
  <h1 class="passage-title">
    复习ES6中精简知识点
  </h1>
  
    <div class="passage-cover">
      <figure style="background-image:url(/blog/images/posts/2021070801.jpg);"></figure>
    </div>
  
  <article class="passage-article">
    <h3 id="let-和-const"><a href="#let-和-const" class="headerlink" title="let 和 const"></a>let 和 const</h3><p><code>var</code>在申明变量时，会申明提前。<code>let</code>和<code>const</code>在申明变量的时候，变量不会提前，不允许重复声明；<code>const</code>会申明一个指针不变的变量；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(A)   <span class="comment">//A is not defined</span></span><br><span class="line"><span class="keyword">let</span> A = <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> A = <span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(A)   <span class="comment">//1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> B = <span class="number">2</span></span><br><span class="line">B = <span class="number">1</span>            <span class="comment">//Assignment to constant variable</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> B = &#123; <span class="attr">a</span>:<span class="number">2</span> &#125;</span><br><span class="line">B.<span class="property">a</span> = <span class="number">1</span>          <span class="comment">//&#123; a:1 &#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="块级作用域"><a href="#块级作用域" class="headerlink" title="{} 块级作用域"></a>{} 块级作用域</h3><p>ES6允许块级作用域的任意嵌套；块级作用域使得获得广泛应用的立即执行函数表达式（IIFE）不在必要；</p>
<p>立即执行函数：立即执行函数的出现是为了不污染全局变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> A = <span class="number">1</span></span><br><span class="line">&#123;</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="keyword">let</span> A = <span class="number">2</span></span><br><span class="line">  &#125;;</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="keyword">let</span> B = <span class="number">3</span></span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(A)   <span class="comment">//1</span></span><br></pre></td></tr></table></figure>

<h3 id="变量的解构赋值"><a href="#变量的解构赋值" class="headerlink" title="变量的解构赋值"></a>变量的解构赋值</h3><p>ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [ x,y ] = [ <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span> ]      <span class="comment">//x = 1; y = 2</span></span><br><span class="line"><span class="keyword">let</span> [ x, ,z ] = [ <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span> ]    <span class="comment">//X = 1; z = 3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [ x,y=<span class="number">2</span> ] = [ <span class="number">1</span> ]           <span class="comment">//x = 1; y = undefined</span></span><br><span class="line"><span class="keyword">let</span> [ x,y=<span class="number">2</span> ] = [ <span class="number">1</span>,<span class="literal">undefined</span> ] <span class="comment">//x = 1; y = 2</span></span><br><span class="line"><span class="keyword">let</span> [ x,y=<span class="number">2</span> ] = [ <span class="number">1</span>,<span class="literal">null</span> ]      <span class="comment">//x = 1; y = null</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> &#123; x,y &#125; = &#123; <span class="attr">y</span>:<span class="number">2</span>,<span class="attr">x</span>:<span class="number">1</span> &#125;     <span class="comment">//x = 1; y = 2</span></span><br><span class="line"><span class="keyword">let</span> &#123; <span class="attr">x</span>:x,<span class="attr">y</span>:y &#125; = &#123; <span class="attr">y</span>:<span class="number">2</span>,<span class="attr">x</span>:<span class="number">1</span> &#125; <span class="comment">//x = 1; y = 2</span></span><br><span class="line"><span class="keyword">let</span> &#123; <span class="attr">A</span>:x &#125; = &#123; <span class="attr">A</span>:<span class="number">1</span> &#125;         <span class="comment">//x = 1</span></span><br></pre></td></tr></table></figure>

<h3 id="扩展运算符"><a href="#扩展运算符" class="headerlink" title="扩展运算符"></a>扩展运算符</h3><p>扩展运算符可以将数组和对象以展开的方式展示或者运算；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> A = [ <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span> ], B  = [ <span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span> ]</span><br><span class="line"><span class="keyword">let</span> C = [ ...A, ...B ]     <span class="comment">//C = [ 1,2,3,2,3,4 ]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> A = &#123; <span class="attr">a</span>:<span class="number">1</span>, <span class="attr">b</span>:<span class="number">2</span> &#125;, B = &#123; <span class="attr">b</span>:<span class="number">3</span>, <span class="attr">c</span>:<span class="number">4</span> &#125;</span><br><span class="line"><span class="keyword">let</span> C = &#123; ...A, ...B&#125;      <span class="comment">//C = &#123; a:1, b:3, c:4 &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> &#123; A,B, ...C &#125; = &#123; <span class="attr">A</span>:<span class="number">1</span>, <span class="attr">B</span>:<span class="number">2</span>, <span class="attr">a</span>:<span class="number">3</span> &#125;  <span class="comment">// A = 1, B = 2, c = &#123;a:2&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="独一无二的Symbol"><a href="#独一无二的Symbol" class="headerlink" title="独一无二的Symbol"></a>独一无二的Symbol</h3><p>ES6 之后，Javascript 拥有6种基本数据类型；string number null undefined boolean symbol代表着独一无二；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> A = <span class="title class_">Symbol</span>(<span class="string">&#x27;king&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> B = <span class="title class_">Symbol</span>(<span class="string">&#x27;King&#x27;</span>);</span><br><span class="line">A==B    <span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Symbol.for 会保证拥有该字符串的symbol。没有才会创建；有则返回</span></span><br><span class="line"><span class="keyword">let</span> A = <span class="title class_">Symbol</span>.<span class="title function_">for</span>(<span class="string">&#x27;king&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> B = <span class="title class_">Symbol</span>.<span class="title function_">for</span>(<span class="string">&#x27;King&#x27;</span>);</span><br><span class="line">A==B    <span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="title class_">Symbol</span>()</span><br><span class="line"><span class="keyword">let</span> A =&#123;</span><br><span class="line">  <span class="attr">a</span>:<span class="number">1</span>,</span><br><span class="line">  [a]:<span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// A.a = 1; A[&#x27;a&#x27;] = 1; A[a] = 2</span></span><br></pre></td></tr></table></figure>

<h3 id="Set-和-Map-的数据结构"><a href="#Set-和-Map-的数据结构" class="headerlink" title="Set 和 Map 的数据结构"></a>Set 和 Map 的数据结构</h3><p>Set 数据结构类似数组，但是它的成员的值都是唯一，没有重复的值；Map 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> A = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">1</span>])</span><br><span class="line">[ <span class="number">2</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">3</span> ].<span class="title function_">forEach</span>( <span class="function"><span class="params">n</span> =&gt;</span> A.<span class="title function_">add</span>(n) )</span><br><span class="line"><span class="comment">// A = [ 1,2,3 ]</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>Set 实例的操作方法（用于操作数据）</p>
</blockquote>
<ul>
<li><code>add(value</code>)：添加某个值，返回 <code>Set</code> 结构本身。</li>
<li><code>delete(value)</code>：删除某个值，返回一个布尔值，表示删除是否成功。</li>
<li><code>has(value)</code>：返回一个布尔值，表示该值是否为Set的成员。</li>
<li><code>clear()</code>：清除所有成员，没有返回值。</li>
</ul>
<blockquote>
<p>Set 实例的遍历方法（用于遍历成员。）。</p>
</blockquote>
<ul>
<li><code>keys()</code>：返回键名的遍历器 </li>
<li><code>values()</code>：返回键值的遍历器 </li>
<li><code>entries()</code>：返回键值对的遍历器</li>
<li><code>forEach()</code>：使用回调函数遍历每个成员</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> A = <span class="keyword">new</span> <span class="title class_">Map</span>([</span><br><span class="line">  [<span class="string">&#x27;name&#x27;</span>,<span class="string">&#x27;张三&#x27;</span>],</span><br><span class="line">  [<span class="string">&#x27;sex&#x27;</span>,<span class="string">&quot;男&quot;</span>]</span><br><span class="line">])</span><br><span class="line"><span class="comment">// &#123;&quot;name&quot; =&gt; &quot;张三&quot;, &quot;sex&quot; =&gt; &quot;男&quot;&#125;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>Map 实例的操作方法（用于操作数据）</p>
</blockquote>
<ul>
<li><code>set(key,value)</code>：添加某个值，返回 <code>Map</code> 结构本身。</li>
<li><code>delete(key)</code>：删除某个值，返回一个布尔值，表示删除是否成功。</li>
<li><code>has(key)</code>：返回一个布尔值，表示该值是否为Map的成员。</li>
<li><code>get(key)</code>：查找map中对应的<code>key</code>值，没有则 undefined。</li>
<li><code>clear()</code>：清除所有成员，没有返回值。</li>
</ul>
<blockquote>
<p>Map 实例的遍历方法（用于遍历成员。）。</p>
</blockquote>
<ul>
<li><code>keys()</code>：返回键名的遍历器 </li>
<li><code>values()</code>：返回键值的遍历器 </li>
<li><code>entries()</code>：返回键值对的遍历器</li>
<li><code>forEach()</code>：使用回调函数遍历每个成员</li>
</ul>
<h3 id="Promise-异步编程"><a href="#Promise-异步编程" class="headerlink" title="Promise 异步编程"></a>Promise 异步编程</h3><p>Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大；Promise对象存在三种状态：<code>pending</code>（进行中）、<code>fulfilled</code>（已成功）<code>和rejected</code>（已失败）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> promise = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">fulfill,reject</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="comment">// 可用于网络请求 等异步操作；</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;异步操作&#x27;</span>)</span><br><span class="line">  <span class="keyword">if</span>(<span class="literal">true</span>)&#123; <span class="comment">// 可以通过条件判断执行不同的状态或只执行成功</span></span><br><span class="line">    <span class="title function_">fulfill</span>(<span class="string">&#x27;成功&#x27;</span>)</span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="title function_">reject</span>(<span class="string">&#x27;失败&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">promise.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">    <span class="comment">// 成功后的回调</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(value)</span><br><span class="line">  &#125;,<span class="keyword">function</span>(<span class="params">error</span>) &#123;</span><br><span class="line">    <span class="comment">// 失败后的回调</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>)=&gt;</span>&#123; <span class="comment">// 和then 第二个参数对比，建议使用 catch 捕获</span></span><br><span class="line">      <span class="comment">// 执行状态失败的回调(包括代码出错)</span></span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">finally</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 无论怎样都会执行的回调</span></span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>

<h3 id="Generator-异步编程"><a href="#Generator-异步编程" class="headerlink" title="Generator 异步编程"></a>Generator 异步编程</h3><p><code>Generator</code> 是 ES6 提供的一种异步编程解决方案；它有两个特征。一是，<code>function</code>关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式. <code>Generator</code> 函数和普通函数最大区别在于它是分段执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* <span class="title function_">generator</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;hello&#x27;</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;word&#x27;</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>)</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;end&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> gen=<span class="title function_">generator</span>()</span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">//1 &#123; value: &#x27;hello&#x27;, done: false &#125;</span></span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">//2 &#123; value: &#x27;word&#x27;, done: false &#125;</span></span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">//3 &#123; value: &#x27;end&#x27;, done: true &#125;</span></span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">//  &#123; value: undefined, done: true &#125;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>generator 的方法</p>
</blockquote>
<ul>
<li><code>throw()</code> ：在函数体外抛出错误。 可以在 <code>Generator</code> 函数体内或体外使用try捕获；</li>
<li><code>return()</code>：可以返回给定的值，并且终结遍历 <code>Generator</code> 函数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 状态机</span></span><br><span class="line"><span class="keyword">var</span> clock = <span class="keyword">function</span>* () &#123;</span><br><span class="line">  <span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">    <span class="keyword">yield</span> <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">yield</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="Async-语法糖"><a href="#Async-语法糖" class="headerlink" title="Async 语法糖"></a>Async 语法糖</h3><p><code>Async</code> 可以看做为 <code>Generator</code> 的语法糖; <code>await</code>后可以跟<code>Promise</code>或其他异步操作，只有异步操作执行才会继续执行；而且<code>Async</code> 会返回<code>Promise</code> 对象；<code>Promise</code>对象只有在<code>async</code>体内的异步操作都完成后才会改变状态，除非return 或者体内抛出异常</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">demo</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>)</span><br><span class="line">    <span class="keyword">await</span> <span class="string">&#x27;hello&#x27;</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>)</span><br><span class="line">    <span class="keyword">await</span> <span class="string">&#x27;word&#x27;</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>)</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;end&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">demo</span>()</span><br><span class="line">.<span class="title function_">then</span>(<span class="function"><span class="params">val</span>=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(val))</span><br><span class="line">.<span class="title function_">catch</span>(<span class="function"><span class="params">err</span>=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(err))</span><br><span class="line">.<span class="title function_">finally</span>(<span class="function"><span class="params">val</span>=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(val))</span><br><span class="line"><span class="comment">// 1 2 3 &#x27;end&#x27; undefined 会依次执行</span></span><br></pre></td></tr></table></figure>

<h3 id="Class-类的定义"><a href="#Class-类的定义" class="headerlink" title="Class 类的定义"></a>Class 类的定义</h3><p>Es6引入了 class 这个概念， 你可以看做为这是个语法糖，他的功能 Es5 都能实现。 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Name</span>&#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">x,y</span>)&#123;  <span class="comment">// 构造方法</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = x</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">sex</span> = y</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">toString</span>(<span class="params">val</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">x</span> +<span class="string">&#x27;是&#x27;</span>+ val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> a=<span class="keyword">new</span> <span class="title class_">Name</span>(<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;男性&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>Es6 通过 extends 指定继承关系；</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">class Point &#123; &#125;</span><br><span class="line"></span><br><span class="line">class ColorPoint extends Point &#123;</span><br><span class="line">  constructor()&#123;</span><br><span class="line">    super() //可以用来获取父级this</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#let-%E5%92%8C-const"><span class="toc-text">let 和 const</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-text">{} 块级作用域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="toc-text">变量的解构赋值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-text">扩展运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%8B%AC%E4%B8%80%E6%97%A0%E4%BA%8C%E7%9A%84Symbol"><span class="toc-text">独一无二的Symbol</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Set-%E5%92%8C-Map-%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84"><span class="toc-text">Set 和 Map 的数据结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise-%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B"><span class="toc-text">Promise 异步编程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Generator-%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B"><span class="toc-text">Generator 异步编程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Async-%E8%AF%AD%E6%B3%95%E7%B3%96"><span class="toc-text">Async 语法糖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Class-%E7%B1%BB%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-text">Class 类的定义</span></a></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2021/07/08/ES6%E4%B8%AD%E7%B2%BE%E7%AE%80%E7%9F%A5%E8%AF%86%E7%82%B9%E5%8F%8A%E9%87%8D%E8%A6%81%E7%9F%A5%E8%AF%86%E7%82%B9/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
    <div class="passage-tags">
     
      <a href="/blog/tags/ES6/"><i class="fa fa-tags"></i>ES6</a>
    
    </div>
  
</div>

    </main>
    
      
<div class="site-comment-contanier" data-plateform="leancloud">
  
    <p id="site-comment-info">
      <i class="fa fa-spinner fa-spin"></i> 评论加载中
    </p>
    <div id="site-comment"></div>
  
</div>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2021/07/20/%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE%E5%9C%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E7%9A%84%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2021/05/07/%E9%A1%B9%E7%9B%AE%E6%89%A7%E8%A1%8C%E9%94%99%E8%AF%AF%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2021/07/20/%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE%E5%9C%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E7%9A%84%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2021/05/07/%E9%A1%B9%E7%9B%AE%E6%89%A7%E8%A1%8C%E9%94%99%E8%AF%AF%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>